<template>
	<view class="sale_bottom">
		<view class="bottom_list">
			<!-- <view class="bottom_card1" v-if="list.length < 8" > -->
				<topUpload :img="upload_img" max-count="9" ></topUpload>
			<!-- </view> -->
			<view class="bottom_card2"  v-for="(item,index) in list" :key="item.id" :class="{'changeMargin1':list.length >= 8}">
				<image class="bottom_img" :src="item.img"  ></image>
			</view>
		</view>
	</view>
</template>

<script>
	import topUpload from 'pages/user/components/top-upload.vue'
	export default {
		components: {
			topUpload
		},
		data() {
			return {};
		},
		props: {
			"list": {
				type: Array, 
				default: []
			}
		},
		mounted() {
			console.log(this.list,"list")
			console.log(this.list.length,"length")
		}
		// 生命周期
		// 頁面渲染完成之後  this.addimg
	};
</script>

<style scoped lang="scss">

	.changeMargin1{
		margin-left: 15rpx!important;
	}
	.changeMargin2{
		margin-left: 15rpx;
	}
		.sale_bottom{
			.bottom_list{
				padding: 80rpx 0 60rpx 0;
				display: flex;
				flex-flow:row wrap;
				.bottom_card1{
					// width: 160rpx;
					// height: 160rpx;
					// background-color: #F8F8FB;
					// border-radius: 8px;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					// margin-left: 15rpx;
					// margin-right: 18rpx;
					.bottom_add{
						height: 32rpx;
						width: 32rpx;
					}
					.bottom_img{
						height: 160rpx;
						width: 160rpx;
					}
				}
				.bottom_card2 + .bottom_card2 {
					margin-left: 15rpx;
					// margin-top: 10rpx;
				}
				.bottom_card2{
					width: 160rpx;
					height: 160rpx;
					margin-top: 10rpx;
					border-radius: 8px;
					.bottom_add{
						height: 32rpx;
						width: 32rpx;
					}
					.bottom_img{
						height: 160rpx;
						width: 160rpx;
					}
				}
			}
		}
</style>

